<script lang='ts' setup>
import {onMounted, ref} from 'vue'
import {CounterStore, useCounter} from "../store/counter";

const store: CounterStore = useCounter()
const msg: string = 'new Message'
const inputRef = ref()
onMounted(() => {
  inputRef.value?.focus()
})
</script>

<template>
  <div class="container">
    <div>Page 1</div>
    <div>{{ msg }}</div>
    <div class="form">
      <el-input ref="inputRef" v-model="store.count"/>
      <div>{{ store.count }}</div>
      <div>{{ store.getDouble }}</div>
      <el-button @click="store.increment">increment</el-button>
      <el-button @click="store.randomize">random</el-button>
      <el-button @click="store.reset">reset</el-button>
      <el-button @click="store.dispose">dispose</el-button>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}
</style>
